// 插件的使用1. 引入插件
// 因为这里只是 webpack 配置, webpack 还没开始运行, 不支持 import
const MiniCssExtractPlugin = require( 'mini-css-extract-plugin' );
const HtmlWebpackPlugin = require( "html-webpack-plugin" );
// 1. webpack.config.js vue的加载器必须配置这个插件使用
const VueLoaderPlugin = require( 'vue-loader/lib/plugin' )

module.exports = {
    // 需要打包的文件
    // 入口文件的意思,指的是整个打包的开始,
    // 所有这个文件引入过的其他文件都会被遗弃打包
    // 甚至引入的文件里面引入的文件引入的文件都会被打包
    entry: './src/index.js',
    // 输出的文件名, 如果没有设定 path 默认 dist
    output: {
        filename: 'bundle.js',
    },

    // 模块加载器选项
    module: {
        rules: [
            {	// 3. 配置loader
                test: /\.vue$/,
                loader: 'vue-loader'
            },
            // 3. 改造 css / less 加载器, 需要提取样式到独立文件
            // 这个数组里面,专门存放各种文件加载的配置
            // css 加载器配置
            {
                // test 用来匹配对应的文件 是正则表达式
                test: /\.css$/,
                // use 配置处理的响应加载器
                use: [ MiniCssExtractPlugin.loader, 'css-loader' ]
            },
            // less 加载器配置
            {
                test: /\.less$/,
                use: [ MiniCssExtractPlugin.loader, 'css-loader', 'less-loader' ]
            },
            {
                test: /\.jpg$/,
                // use: ['file-loader']
                // file-loader 可以添加其他配置
                // 从字符串变成对象
                use: [
                    {
                        loader: 'file-loader',
                        options: {
                            outputPath: 'image'
                        }
                    }
                ]
            },
            {
                test: /\.ttf$/,
                // use: ['file-loader']
                use: [
                    {
                        loader: 'file-loader',
                        options: {
                            outputPath: 'assets'
                        }
                    }
                ]
            }
        ]
    },

    // 2. 创建插件实例
    plugins: [
        new MiniCssExtractPlugin(),
        new HtmlWebpackPlugin( {
            template: 'public/index.html'
        } ),
        // 2.  请确保引入这个插件！
        new VueLoaderPlugin()
    ]
}